import React from 'react'

class ControllerUnit extends React.Component {

  handleClick(e) {
    e.preventDefault();
    e.stopPropagation();
    if (!this.props.arrange.isCenter) {
      this.props.center();
    } else {
      this.props.inverse();
    }
  }

  render() {

    let styleObj = {};

    styleObj.transform = 'scale(0.5)';
    styleObj.bgColor = '#aaa';
    styleObj.visibility = 'hidden';
    if (this.props.arrange.isCenter) {
      styleObj.transform = 'scale(1)';
      styleObj.bgColor = '#888';
      styleObj.visibility = 'visible';

      if (this.props.arrange.isInverse) {
        styleObj.bgColor = '#555';
        styleObj.transform = 'scale(1) rotateY(180deg)';
      }
    }


    return (
      <div
        className="controller-unit"
        onClick={(e) => this.handleClick(e)}
        style={{
          display: 'inline-block',
          margin: '0 5px',
          width: 30,
          height: 30,
          transform: styleObj.transform,
          textAlign: 'center',
          cursor: 'pointer',
          transition: 'transform 0.6s ease-in-out, background-color 0.3s',
          backgroundColor: styleObj.bgColor,
          borderRadius: '50%',
        }}>

        <svg
          className="icon"
          aria-hidden="true"
          style={{
            verticalAlign: 'middle',
            height: 30,
            width: 30,
            visibility: styleObj.visibility,
          }}>
          <use xlinkHref="#icon-zuoxuanzhuan"/>
        </svg>

      </div>
    );
  }
}

export default ControllerUnit